<template>
  <div>
    <div class="box">
      <img
        src="../../static/img/frame_logo_min.png"
        width="121"
        height="75"
        style="position: absolute; left: -99px; top: -99px"
        alt="QQ音乐最新版官方下载。最全的高品质正版音乐曲库，任你免费试听下载。"
      />
      <div class="menu">
        <div class="menu__content">
          <h2 class="menu__title">
            <span class="menu__link" title="QQ音乐"
              ><img
                @click="toself"
                class="menu__logo"
                src="../../static/img/qqlogo1.png"
                alt="QQ音乐"
            /></span>
          </h2>
          <a v-show="myshow" id="id_btn_home" href="javascript:;">app下载</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, } from "vuex";
export default {
  name: "HomePage",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapState({
      myshow: (state) => state.myshow,
    }),
  },

  methods: {
     toself() {
      this.$router.push("/denglu");
    },
  },
};
</script>
<style lang="less" scoped>
.col2 {
  border-radius: 20px;
  position: absolute;
  overflow: hidden;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: #ffffff;
 box-shadow: inset 0 0 6px rgb(221 58 31 / 60%);
}
.menu {
  height: 80px;
  background-color: #272727;
  overflow: hidden;
  color: #000;
  font-size: 12px;
  line-height: 1.5;
  font-family: Tahoma, \5fae\8f6f\06c5\0ed1, "hiragino sans gb", Helvetica,
    Arial;
}
.menu__content {
  position: relative;
  margin: 20px auto;

  height: 40px;
}
.menu__title {
  float: left;
  margin-top: -5px;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.menu__link {
  display: block;
}
.menu__logo {
  width: 162px;
  border: none;
  height: 46px;
}
.menu .btn_share {
  position: relative;
  width: 120px;
  height: 40px;
  line-height: 40px;

  border-radius: 20px;
  text-align: center;
  display: block;
  float: right;
  margin-left: 27px;
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
  .fx {
    position: absolute;
    text-decoration: none;
    display: block;
    color: #fff;
    left: 44%;
    transform: translateX(-50%);
    z-index: 3;
  }
  


}
#id_btn_home {
  position: absolute;
  right: 200px;
  transform: translateX(0px);
  display: block;
  top: 0px;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}

.box {
  padding-bottom: 4px;
}
</style>